import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Image,
  Text,
  TextInput,
  View,
  Button
} from 'react-native';
import {  StackNavigator} from 'react-navigation';

export default class AddScreen extends Component {
    constructor(props){
      super(props);
      this.state = {
        word: '欢迎你',
        header:'',
        text:''
      }
    };
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.name}`,
    });
    handleSubmit = () => {
      if( this.state.header == '' && this.state.text == '' ){
        alert('标题和内容不能全为空！');
        return;
      }
      storage.load({
        key:'dataCords',
        autoSync: false,
        
        // syncInBackground(默认为true)意味着如果数据过期，
        // 在调用sync方法的同时先返回已经过期的数据。
        // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
        syncInBackground: false,
      }).then( ret => {//如果已存在记录，则追加，
        ret.push(
          {
            time: new Date,
            header: this.state.header,
            content:this.state.text
          }
        );
        storage.remove({//总是新数据替换旧数据,这是删掉旧数据，下面是增加新的数据
          key: 'dataCords'
        }).then( () => {
          storage.save({
            key: 'dataCords',  // 注意:请不要在key中使用_下划线符号!
            data: ret, 
            
            // 如果不指定过期时间，则会使用defaultExpires参数
            // 如果设为null，则永不过期
            expires: null
          }).then( () => alert('添加成功！') );
        } );
        
      } ).catch( err => {//不存在则创造
        storage.save({
          key: 'dataCords',  // 注意:请不要在key中使用_下划线符号!
          data: [
            { 
              time: new Date,
              header: this.state.header,
              content:this.state.text
             }
          ],
          
          // 如果不指定过期时间，则会使用defaultExpires参数
          // 如果设为null，则永不过期
          expires: null
        }).then( () => alert('添加成功！') );
 
     
      } )
    }
    render(){
        return(
            <View style={{justifyContent:'center',alignItems:'center'}}>
               <TextInput
                style={{height: 40,width:150}}
                placeholder="请输入标题！!"
                onChangeText={(header) => this.setState({header})}
                onSubmitEditing = { () => this.handleSubmit() }
              />
               <TextInput
                style={{height: 80,width:150}}
                placeholder="请输入内容！!"
                onChangeText={(text) => this.setState({text})}
                onSubmitEditing = { () => this.handleSubmit() }
              />
               <Text>{ this.state.text }</Text>
               <View style={{width:100,justifyContent:'center',alignItems:'center'}}>
                  <Button color="#333" title="确定" onPress= { () => this.handleSubmit() } />
               </View>
            </View>
         
        )
    }
}
